<template>
	<div class="form-page">
		<el-dialog title="新增表单" :visible.sync="showFormTips" width="50%" :before-close="closeTips">
			<el-form :model="addFormInfo" :rules="rules" ref="ruleForm" label-width="100px">
				<el-form-item label="表单名称" prop="name">
					<el-input v-model="addFormInfo.name" placeholder="请输入表单名称"></el-input>
				</el-form-item>
				<el-form-item class="prop" prop="name" label="字段名称" v-for="(item, index) in addFormInfo.fields" :key="index">
					<el-input v-model="item.name" placeholder="请输入字段名称"></el-input>
					<i class="el-icon-close" @click="removeProp(index)" v-show="addFormInfo.fields.length > 1"></i>
				</el-form-item>
				<el-form-item>
					<el-button @click="addProps">添加字段</el-button>
				</el-form-item>
				<div class="btn">
					<el-button @click="cancelAddProp">取消</el-button>
					<el-button type="primary" @click="getAddProps">确认</el-button>
				</div>
			</el-form>
		</el-dialog>
		<el-dialog title="编辑表单" :visible.sync="editFormTips" width="50%" :before-close="cancelEditProp">
			<el-form :model="editFormInfo" :rules="rules" ref="ruleForm">
				<el-form-item label="表单名称" prop="name">
					<el-input v-model="editFormInfo.name" placeholder="请输入表单名称"></el-input>
				</el-form-item>
				<el-form-item class="prop" prop="name" label="字段名称" v-for="(item, index) in editFormInfo.fields" :key="index">
					<el-input v-model="item.name" placeholder="请输入字段名称"></el-input>
					<i class="el-icon-close" @click="removeEditProp(index)" v-show="editFormInfo.fields.length > 1"></i>
				</el-form-item>
				<el-form-item>
					<el-button class="addProps" @click="addEditProps">添加字段</el-button>
				</el-form-item>
				<div class="btn">
					<el-button @click="cancelEditProp">取消</el-button>
					<el-button type="primary" @click="modifyProps">确认</el-button>
				</div>
			</el-form>
		</el-dialog>
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="表单管理" name="form">
				<div class="head">
					<el-button type="primary" @click="addForm">创建表单</el-button>
				</div>
				<div class="table">
					<Table :tableData="formData">
						<template v-slot:btn>
							<el-table-column width="400px" align="center" fixed="right" label="操作">
								<template slot-scope="scope">
									<el-button size="mini" type="primary" @click="editForm(scope.$index, scope.row)">编辑</el-button>
									<el-button size="mini" type="danger" @click="deleteForm(scope.$index, scope.row)">删除</el-button>
								</template>
							</el-table-column>
						</template>
					</Table>
				</div>
				<br />
				<div class="page">
					<PageSize :pages="checkData" @changePageSize="changePageSize" @changeCurrentPage="changeCurrentPage" />
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
import { getFormTemplateList, createFormTemplate, deleteFormTemplateWithId, updateFormTemplate } from '../../api/api';
import Table from '../components/Table.vue';
import PageSize from '../components/PageSize.vue';
export default {
	components: {
		Table,
		PageSize
	},
	data() {
		return {
			activeName: 'form',
			checkData: {
				page: 1,
				pageSize: 10,
				total: 0,
				name: ''
			},
			addFormInfo: {
				id: '',
				name: '',
				fields: [{ name: '' }]
			},
			editFormInfo: {
				id: '',
				name: '',
				fields: [{ name: '' }]
			},
			formName: '',
			showFormTips: false,
			editFormTips: false,
			formData: {
				sort: false,
				tableHead: [
					{
						label: '表单名称',
						prop: 'formName'
					},
					{
						label: '创建时间',
						prop: 'createdAt'
					}
				],
				tableConent: [],
				showIndex: false,
				showCheck: false
			},
			rules: {
				name: [{ required: true, message: '请填写表单名称', trigger: ['blur', 'change'] }]
			}
		};
	},
	mounted() {
		this.getFormTemplateInit();
	},

	methods: {
		getFormTemplateInit() {
			getFormTemplateList(this.checkData)
				.then(res => {
					if (res.status === 200) {
						const total = res.data.count;
						this.checkData.total = total;
						const { data } = res.data;
						this.formData.tableConent = data.map(item => {
							return {
								id: item.id,
								formName: item.name,
								fields: item.fields,
								createdAt: this.$moment(item.createdAt).format('YYYY-MM-DD HH:mm:ss')
							};
						});
					}
				})
				.catch(err => {
					this.$requestApiError(err, () => {
						this.$router.push('/');
					});
				});
		},
		addForm() {
			this.showFormTips = true;
		},
		addProps() {
			this.addFormInfo.fields.push({
				name: ''
			});
		},
		addEditProps() {
			this.editFormInfo.fields.push({
				name: ''
			});
		},
		editForm(index, row) {
			this.getFormTemplateInit();
			this.editFormInfo.name = row.formName;
			this.editFormInfo.fields = row.fields;
			this.editFormInfo.id = row.id;
			this.editFormTips = true;
			console.log(row);
		},
		deleteForm(index, row) {
			this.$confirm('确定要删除当前表单吗,是否继续？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$Spin.show();
					deleteFormTemplateWithId(row.id)
						.then(res => {
							if (res.status === 200) {
								this.getFormTemplateInit();
								this.$message.success('表单删除成功！');
								this.$Spin.hide();
							}
						})
						.catch(err => {
							this.$Spin.hide();
							this.$requestApiError(err, () => {
								this.$router.push('/');
							});
							if (err.code === '1201') {
								this.$message({
									type: 'error',
									message: '关联业务场景为启用状态，不可删除！'
								});
							}
						});
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});
		},
		closeTips() {
			this.showFormTips = false;
			this.$refs['ruleForm'].resetFields();
		},
		removeProp(index) {
			this.addFormInfo.fields.splice(index, 1);
		},
		removeEditProp(index) {
			this.editFormInfo.fields.splice(index, 1);
		},
		cancelAddProp() {
			this.showFormTips = false;
			this.$refs['ruleForm'].resetFields();
		},
		cancelEditProp() {
			this.addFormInfo.name = '';
			this.addFormInfo.id = '';
			this.addFormInfo.fields = [{ name: '' }];
			this.editFormTips = false;
		},
		getAddProps() {
			let value = true;
			this.addFormInfo.fields.map(item => {
				if (item.name === '') {
					value = false;
				}
			});
			if (this.addFormInfo.name.trim() === '' || !value) {
				this.$message.error('请填写完整信息！');
			} else {
				createFormTemplate(this.addFormInfo)
					.then(res => {
						if (res.status === 200) {
							this.$message.success('创建表单成功！');
							this.getFormTemplateInit();
							this.showFormTips = false;
							this.addFormInfo.fields = [{ name: '' }];
							this.$refs['ruleForm'].resetFields();
						}
					})
					.catch(err => {
						this.$message.error('创建表单失败！' + err.message);
						this.$requestApiError(err, () => {
							this.$router.push('/');
						});
					});
			}
		},
		modifyProps() {
			let value = true;
			this.editFormInfo.fields.map(item => {
				if (item.name === '') {
					value = false;
				}
			});
			if (this.editFormInfo.name.trim() === '' || !value) {
				this.$message.error('请填写完整信息！');
			} else {
				updateFormTemplate(this.editFormInfo).then(res => {
					if (res.status === 200) {
						this.$message.success('修改表单成功！');
						this.getFormTemplateInit();
						this.editFormTips = false;
					}
				});
			}
		},
		// 分页
		changePageSize(val) {
			this.checkData.pageSize = val;
			this.getFormTemplateInit();
		},
		changeCurrentPage(val) {
			this.checkData.page = val;
			this.getFormTemplateInit();
		}
	}
};
</script>

<style lang="less" scoped>
.form-page {
	.head {
		padding: 20px 0;
	}
	.btn {
		text-align: right;
	}
	.prop {
		width: 100%;
		.el-input {
			width: 92%;
		}
	}
	.el-icon-close {
		padding-left: 10px;
		cursor: pointer;
	}
}
</style>

<style lang="less">
.form-page {
	.form-item__content {
		margin: 0 !important;
		width: 70%;
	}
}
</style>
